<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>大事件/登录页面</title>
    <!-- live serve启动，根目录就是big_event_01文件夹。 -->
    <!-- live serve启动, 文件 图片 背景 尽量使用绝对路径 即不加点. -->
    <!--绝对路径时再用默认浏览器打开，会报错，根据绝对路径找不到文件 -->
    <!--先引入layui  -->
    <link rel="stylesheet" href="/assets/lib/layui/css/layui.css" />
    <!-- 再引入login.css -->
    <!-- 自己的样式可以覆盖一些layui的样式 -->
    <link rel="stylesheet" href="/assets/css/login.css" />
  </head>
  <body>
    <!-- 1.顶部logo -->
    <div class="layui-main header">
      <img src="/assets/images/logo.png" alt="" />
    </div>
    <!-- 2.登录注册区域 -->
    <div class="login-reg">
      <!-- 2.1顶部标题 -->
      <div class="title-box"></div>
      <!-- 2.1登录区域 -->
      <!-- id名小驼峰，类名不用 -->
      <div id="loginBox">
        <!-- layui 表单 -->
        <!--layui-form这个类名，必须写， layui要通过这个属性校验form表单 -->
        <form class="layui-form" id="form-login">
          <!-- 用户名 -->
          <div class="layui-form-item">
            <i class="layui-icon layui-icon-username"></i>
            <!--lay-verify="required"是layui的非空校验， required是css的非空校验-->
            <!-- 在value里写默认值，不用每次都写 -->
            <input
              value="阿萨达啊"
              type="text"
              name="username"
              required
              lay-verify="required"
              placeholder="请输入用户名"
              autocomplete="off"
              class="layui-input"
            />
          </div>
          <!-- 密码 -->
          <div class="layui-form-item">
            <i class="layui-icon layui-icon-password"></i>
            <!--lay校验规则之间用|隔开 lay-verify="required|pwd" -->
            <!--为了校验方便，开发时都写type="text"，最后上线改成相应type -->
            <!-- 在value里写默认值，不用每次都写 -->
            <input
              value="123123"
              type="text"
              name="password"
              required
              lay-verify="required|pwd"
              placeholder="请输入密码"
              autocomplete="off"
              class="layui-input"
            />
          </div>
          <!-- 按钮 -->
          <div class="layui-form-item">
            <!-- type='submit',可写可不写，因为默认type就是submit -->
            <!--lay-submit是一个属性，必须写， layui要通过这个属性校验form表单 -->
            <button
              class="layui-btn layui-btn-fluid layui-btn-normal"
              lay-submit
            >
              登录
            </button>
          </div>
          <!-- a链接 -->
          <div class="layui-form-item">
            <a href="javascript:;">去注册新号</a>
          </div>
        </form>
      </div>
      <!-- 2.1注册区域 -->
      <div id="registerBox" style="display: none">
        <form class="layui-form" id="form-reg">
          <div class="layui-form-item">
            <i class="layui-icon layui-icon-username"></i>
            <input
              type="text"
              name="username"
              required
              lay-verify="required"
              placeholder="请输入用户名"
              autocomplete="off"
              class="layui-input"
            />
          </div>
          <div class="layui-form-item">
            <i class="layui-icon layui-icon-password"></i>
            <input
              type="text"
              name="password"
              required
              lay-verify="required|pwd"
              placeholder="请输入密码"
              autocomplete="off"
              class="layui-input"
            />
          </div>
          <div class="layui-form-item">
            <i class="layui-icon layui-icon-password"></i>
            <!-- 再次确认密码的input的name不能跟输入密码的name相同，否则会收到两个密码 -->
            <input
              type="text"
              name="repassword"
              required
              lay-verify="required|pwd|repwd"
              placeholder="请确认密码"
              autocomplete="off"
              class="layui-input"
            />
          </div>
          <div class="layui-form-item">
            <button
              class="layui-btn layui-btn-fluid layui-btn-normal"
              lay-submit
            >
              注册
            </button>
          </div>
          <div class="layui-form-item">
            <a href="javascript:;">去登录</a>
          </div>
        </form>
      </div>
    </div>
    <!-- layui不依赖jquery,它和jquery的引入顺序随意，bootstrap依赖jquery,它要在jquery的后面-->
    <!-- 引入layuiall 会自动提示不能为空输入 因为其中已经写了校验代码 -->
    <script src="/assets/lib/layui/layui.all.js"></script>
    <!-- 引入axios，axios不依赖其它，位置随意 -->
    <script src="/assets/lib/axios.js"></script>
    <!-- 引入axios路径前缀配置，要在axios之后 -->
    <script src="/assets/js/common.js"></script>
    <!-- 引入jQuery -->
    <script src="/assets/lib/jquery.js"></script>
    <!-- 引入自己的js -->
    <script src="/assets/js/login.js"></script>
  </body>
</html>
